<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- Main content -->
<section class="content">
	<div class="row">
		<div class="col-md-6">
			<div class="panel">
				<header class="panel-heading"> Bordered Table </header>
				<div class="panel-body">
					<table class="table table-bordered">
						<tr>
							<th style="width: 10px">#</th>
							<th>Task</th>
							<th>Progress</th>
							<th style="width: 40px">Label</th>
						</tr>
						<tr>
							<td>1.</td>
							<td>Update software</td>
							<td>
								<div class="progress xs">
									<div class="progress-bar progress-bar-danger"
										style="width: 55%"></div>
								</div>
							</td>
							<td><span class="badge bg-red">55%</span></td>
						</tr>
						<tr>
							<td>2.</td>
							<td>Clean database</td>
							<td>
								<div class="progress xs">
									<div class="progress-bar progress-bar-yellow"
										style="width: 70%"></div>
								</div>
							</td>
							<td><span class="badge bg-yellow">70%</span></td>
						</tr>
						<tr>
							<td>3.</td>
							<td>Cron job running</td>
							<td>
								<div class="progress xs progress-striped active">
									<div class="progress-bar progress-bar-primary"
										style="width: 30%"></div>
								</div>
							</td>
							<td><span class="badge bg-light-blue">30%</span></td>
						</tr>
						<tr>
							<td>4.</td>
							<td>Fix and squish bugs</td>
							<td>
								<div class="progress xs progress-striped active">
									<div class="progress-bar progress-bar-success"
										style="width: 90%"></div>
								</div>
							</td>
							<td><span class="badge bg-green">90%</span></td>
						</tr>
					</table>
					<div class="table-foot">
						<ul class="pagination pagination-sm no-margin pull-right">
							<li><a href="#">&laquo;</a></li>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">&raquo;</a></li>
						</ul>
					</div>
				</div>
				<!-- /.panel-body -->

			</div>
			<!-- /.panel -->

			<div class="panel">
				<header class="panel-heading"> Condensed Full Width Table </header>
				<div class="panel-body no-padding">
					<table class="table table-condensed">
						<tr>
							<th style="width: 10px">#</th>
							<th>Task</th>
							<th>Progress</th>
							<th style="width: 40px">Label</th>
						</tr>
						<tr>
							<td>1.</td>
							<td>Update software</td>
							<td>
								<div class="progress xs">
									<div class="progress-bar progress-bar-danger"
										style="width: 55%"></div>
								</div>
							</td>
							<td><span class="badge bg-red">55%</span></td>
						</tr>
						<tr>
							<td>2.</td>
							<td>Clean database</td>
							<td>
								<div class="progress xs">
									<div class="progress-bar progress-bar-yellow"
										style="width: 70%"></div>
								</div>
							</td>
							<td><span class="badge bg-yellow">70%</span></td>
						</tr>
						<tr>
							<td>3.</td>
							<td>Cron job running</td>
							<td>
								<div class="progress xs progress-striped active">
									<div class="progress-bar progress-bar-primary"
										style="width: 30%"></div>
								</div>
							</td>
							<td><span class="badge bg-light-blue">30%</span></td>
						</tr>
						<tr>
							<td>4.</td>
							<td>Fix and squish bugs</td>
							<td>
								<div class="progress xs progress-striped active">
									<div class="progress-bar progress-bar-success"
										style="width: 90%"></div>
								</div>
							</td>
							<td><span class="badge bg-green">90%</span></td>
						</tr>
					</table>
				</div>
				<!-- /.panel-body -->
			</div>
			<!-- /.panel -->
		</div>
		<!-- /.col -->
		<div class="col-md-6">
			<div class="panel">
				<header class="panel-heading"> Simple Full Width Table </header>
				<div class="panel-body">
					<div class="box-tools">
						<ul class="pagination pagination-sm m-b-10 m-t-10 pull-right">
							<li><a href="#">&laquo;</a></li>
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">&raquo;</a></li>
						</ul>
					</div>
					<table class="table">
						<tr>
							<th style="width: 10px">#</th>
							<th>Task</th>
							<th>Progress</th>
							<th style="width: 40px">Label</th>
						</tr>
						<tr>
							<td>1.</td>
							<td>Update software</td>
							<td>
								<div class="progress xs">
									<div class="progress-bar progress-bar-danger"
										style="width: 55%"></div>
								</div>
							</td>
							<td><span class="badge bg-red">55%</span></td>
						</tr>
						<tr>
							<td>2.</td>
							<td>Clean database</td>
							<td>
								<div class="progress xs">
									<div class="progress-bar progress-bar-yellow"
										style="width: 70%"></div>
								</div>
							</td>
							<td><span class="badge bg-yellow">70%</span></td>
						</tr>
						<tr>
							<td>3.</td>
							<td>Cron job running</td>
							<td>
								<div class="progress xs progress-striped active">
									<div class="progress-bar progress-bar-primary"
										style="width: 30%"></div>
								</div>
							</td>
							<td><span class="badge bg-light-blue">30%</span></td>
						</tr>
						<tr>
							<td>4.</td>
							<td>Fix and squish bugs</td>
							<td>
								<div class="progress xs progress-striped active">
									<div class="progress-bar progress-bar-success"
										style="width: 90%"></div>
								</div>
							</td>
							<td><span class="badge bg-green">90%</span></td>
						</tr>
					</table>
				</div>
				<!-- /.panel-body -->
			</div>
			<!-- /.panel -->

			<div class="panel">
				<header class="panel-heading"> Striped Full Width Table </header>
				<div class="panel-body">
					<table class="table table-striped">
						<tr>
							<th style="width: 10px">#</th>
							<th>Task</th>
							<th>Progress</th>
							<th style="width: 40px">Label</th>
						</tr>
						<tr>
							<td>1.</td>
							<td>Update software</td>
							<td>
								<div class="progress xs">
									<div class="progress-bar progress-bar-danger"
										style="width: 55%"></div>
								</div>
							</td>
							<td><span class="badge bg-red">55%</span></td>
						</tr>
						<tr>
							<td>2.</td>
							<td>Clean database</td>
							<td>
								<div class="progress xs">
									<div class="progress-bar progress-bar-yellow"
										style="width: 70%"></div>
								</div>
							</td>
							<td><span class="badge bg-yellow">70%</span></td>
						</tr>
						<tr>
							<td>3.</td>
							<td>Cron job running</td>
							<td>
								<div class="progress xs progress-striped active">
									<div class="progress-bar progress-bar-primary"
										style="width: 30%"></div>
								</div>
							</td>
							<td><span class="badge bg-light-blue">30%</span></td>
						</tr>
						<tr>
							<td>4.</td>
							<td>Fix and squish bugs</td>
							<td>
								<div class="progress xs progress-striped active">
									<div class="progress-bar progress-bar-success"
										style="width: 90%"></div>
								</div>
							</td>
							<td><span class="badge bg-green">90%</span></td>
						</tr>
					</table>
				</div>
				<!-- /.panel-body -->
			</div>
			<!-- /.panel -->
		</div>
		<!-- /.col -->
	</div>
	<!-- /.row -->
	<div class="row">
		<div class="col-xs-12">
			<div class="panel">
				<header class="panel-heading"> Responsive Hover Table </header>
				<!-- <div class="box-header"> -->
				<!-- <h3 class="box-title">Responsive Hover Table</h3> -->

				<!-- </div> -->
				<div class="panel-body table-responsive">
					<div class="box-tools m-b-15">
						<div class="input-group">
							<input type="text" name="table_search"
								class="form-control input-sm pull-right" style="width: 150px;"
								placeholder="Search" />
							<div class="input-group-btn">
								<button class="btn btn-sm btn-default">
									<i class="fa fa-search"></i>
								</button>
							</div>
						</div>
					</div>
					<table class="table table-hover">
						<tr>
							<th>ID</th>
							<th>User</th>
							<th>Date</th>
							<th>Status</th>
							<th>Reason</th>
						</tr>
						<tr>
							<td>183</td>
							<td>John Doe</td>
							<td>11-7-2014</td>
							<td><span class="label label-success">Approved</span></td>
							<td>Bacon ipsum dolor sit amet salami venison chicken flank
								fatback doner.</td>
						</tr>
						<tr>
							<td>219</td>
							<td>Jane Doe</td>
							<td>11-7-2014</td>
							<td><span class="label label-warning">Pending</span></td>
							<td>Bacon ipsum dolor sit amet salami venison chicken flank
								fatback doner.</td>
						</tr>
						<tr>
							<td>657</td>
							<td>Bob Doe</td>
							<td>11-7-2014</td>
							<td><span class="label label-primary">Approved</span></td>
							<td>Bacon ipsum dolor sit amet salami venison chicken flank
								fatback doner.</td>
						</tr>
						<tr>
							<td>175</td>
							<td>Mike Doe</td>
							<td>11-7-2014</td>
							<td><span class="label label-danger">Denied</span></td>
							<td>Bacon ipsum dolor sit amet salami venison chicken flank
								fatback doner.</td>
						</tr>
					</table>
				</div>
				<!-- /.box-body -->
			</div>
			<!-- /.box -->
		</div>
	</div>
</section>
<!-- /.content -->
<div class="footer-main">Copyright &copy Director, 2014</div>